import { createStore } from "vuex";

import vuexPers from "vuex-persistedstate";
//持久化插件
export default createStore({
  state: {
    shopcar: [],
    //购物车数据
    checked: false,
    //全选按钮
  },
  mutations: {
    add(state, val) {
      // state.shopcar.push(val);
      let flag = false;
      //这个变量代表了商品存不存在

      state.shopcar.forEach((item) => {
        if (item._id == val._id) {
          item.num++;
          flag = true;
        }
      });
      //如果商品存在就让num++

      //必须循环结束才能知道这个商品存不存在

      if (flag == false) {
        val.num = 1;
        //如果第一次添加给一个num=1

        val.status = false;
        //给一个初始状态代表商品没有没被选中
        state.shopcar.push(val);
      }
      //如果循环结束 flag都没有变成true就代表 这个商品不存在 那么就设置num=1 并push进去
    },

    checkItem(state) {
      state.checked = state.shopcar.every((item) => {
        return item.status == true;
      });
      // every 遍历数组 如果 全都满足满足条件就返回true 如果有一个不满足条件就返回false
      // 在这里 如果都选中 那么就返回一个true 给checked了 如果有一个没选中那么就返回false 把值给checked
      // 这里有很多中写法 可以 自己尝试一下别的写法
    },

    checkAll(state) {
      state.shopcar.forEach((item) => {
        item.status = state.checked;
      });
      //遍历购物车 如果全选是true就让 每个商品的status都是true 如果是false 就让每个商品都是false
    },
    //按下全选按钮
  },
  actions: {},
  modules: {},
  getters: {
    allPrice(state) {
      let all = 0;
      state.shopcar.forEach((item) => {
        if (item.status == true) {
          all += item.num * item.price;
        }
      });

      return all;
    },
    //计算总价
  },
  plugins: [vuexPers()],
});
